<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="Docutils 0.5: http://docutils.sourceforge.net/" />
<title>Layers</title>
<link rel="stylesheet" href="doc.css" type="text/css" />
</head>
<body>
<div class="document">
<div class="navigation navigation-header container">
<span class="previous">Previous: <a class="reference" href="director.html" title="Director">Director</a></span><span class="next">Next: <a class="reference" href="sprites.html" title="Sprites">Sprites</a></span><span class="breadcrumbs"><a class="reference" href="index.html" title="Programming Guide">Programming Guide</a> » <a class="reference" href="basic_concepts.html" title="Basic Concepts">Basic Concepts</a> » Layers</span></div>
<h1 class="title">Layers</h1>

<p>Layers helps you organize the scene in the back to front axis, by example</p>
<blockquote>
<ul class="simple">
<li>background : a fixed draw of landscape</li>
<li>far : decorative trees and birds</li>
<li>middle : platforms</li>
<li>near : player, enemies, coins</li>
<li>HUD : Heads Up Display to show game stats like life, energy</li>
</ul>
</blockquote>
<p>You can think layers as (usually) transparent sheets where the children are drawn, and the scene as the stack of sheets</p>
<img alt="layers.png" src="layers.png" />
<p>In non MVC design style some code related to nodes interaction tends to float at the layer holding the entities, providing higher functional units.
By example, <a class="reference apilink" href="../api/cocos.menu.Menu-class.html " title="cocos.menu.Menu">Menu</a> is a Layer subclass that knows how to layout and animate items, read user input and do control flow.</p>
<p>Layers are the ones defining appearance and behavior, so most of your programming
time will be spent coding <a class="reference apilink" href="../api/cocos.layer.base_layers.Layer-class.html " title="cocos.layer.base_layers.Layer">Layer</a> subclasses that do what you need.</p>
<p>The <cite>Layer</cite> is where you define event handlers. Events are propagated to layers
(from front to back) until some layer catches the event and accepts it.</p>
<p>Even if any serious app will require you to define some <cite>Layer</cite> subclasses, cocos2d
provides some useful specialized layers</p>
<blockquote>
<ul class="simple">
<li><a class="reference apilink" href="../api/cocos.layer.base_layers.MultiplexLayer-class.html " title="cocos.layer.base_layers.MultiplexLayer">MultiplexLayer</a>, a group of layers where only one is seen at a time</li>
<li><a class="reference sectionlink" href="brief_tour_of_built_in_cocosnode_subclasses.html#scrollingmanager">ScrollingManager</a>, <a class="reference sectionlink" href="brief_tour_of_built_in_cocosnode_subclasses.html#scrollablelayer">ScrollableLayer</a>; does the logic to limit scroll to viewable areas</li>
<li><a class="reference apilink" href="../api/cocos.tiles.RectMapLayer-class.html " title="cocos.tiles.RectMapLayer">RectMapLayer</a>, <a class="reference apilink" href="../api/cocos.tiles.HexMapLayer-class.html " title="cocos.tiles.HexMapLayer">HexMapLayer</a>; displays a group of rectangular or hexagonal tiles</li>
<li><cite>Menu</cite>, implements simple menus</li>
<li><a class="reference apilink" href="../api/cocos.layer.util_layers.ColorLayer-class.html " title="cocos.layer.util_layers.ColorLayer">ColorLayer</a>, a solid color rectangle</li>
<li><a class="reference sectionlink" href="brief_tour_of_built_in_cocosnode_subclasses.html#interpreterlayer">InterpreterLayer</a>, used by director to pop up an interactive console to peek and poke at the objects in our scene ( ctrl + I to toggle on-off)</li>
</ul>
</blockquote>
<p>To make loading of appropriate assets easier you may override the <tt class="docutils literal"><span class="pre">init</span></tt>
method of your <cite>Layer</cite> subclass. This will be called when your Layer is
created.</p>
<p>Since layers are subclass of <a class="reference apilink" href="../api/cocos.cocosnode.CocosNode-class.html " title="cocos.cocosnode.CocosNode">CocosNode</a>, they can be transformed manually or
by using actions.
See <cite>Actions, Transformations and Effects</cite> for more detail about actions.</p>
<div class="navigation navigation-footer container">
<span class="previous">Previous: <a class="reference" href="director.html" title="Director">Director</a></span><span class="next">Next: <a class="reference" href="sprites.html" title="Sprites">Sprites</a></span><span class="breadcrumbs"><a class="reference" href="index.html" title="Programming Guide">Programming Guide</a> » <a class="reference" href="basic_concepts.html" title="Basic Concepts">Basic Concepts</a> » Layers</span></div>
</div>
</body>
</html>
